// 图片上传 || 附件上传
function Upload(opt) {
	this.origin = {
		addBtn: '.add-file-btn', // 添加图片 || 附件 按钮
		fileInput: '#file-input', // 选择的图片内容 || 附件内容
		type: 'POST', // 提交方法
	};
	this.attachment = true, // true： 附件上传， false: 图片上传
	this.btn = ''; // 当前点击的btn, 用于上传成功之后追加dom
	this.url = ''; // 文件上传地址
	this.imgBox = ''; // 用于存放图片的容器
	this.attachmentBox = ''; // 用于存放附件的容器
	this.maxNum = 1; // 最多上传图片数
	this.origin = $.extend(this.origin, opt);
	this.listTimer = ''; // 附件上传进度计时器
	this.imgTimer = ''; // 图片上传进度计时器
	this.fileName = ''; // 文件名
	this.init();
}

	/* 初始化 */
	Upload.prototype.init = function() {
		var _this = this;
		// 点击新增按钮
        $('body').on('click', _this.origin.addBtn, function() {
        	// 附件上传
        	if ($(this).parents('.hw-img-lists').length === 0) {
        		_this.url = '/Api/Upload/ajax_upload';
        		_this.attachment = true;
        		_this.attachmentBox = $(this).parents('.group-item').siblings().find('.hw-attachment-lists');
        	} else {
        		// 图片上传
        		_this.url = '/Api/Upload/ajax_upload_img';
        		_this.attachment = false;
        		_this.imgBox = $(this).parents('.hw-img-lists');
        		_this.maxNum = $(this).data('num') ? $(this).data('num') : 1;
        	}
        	_this.btn = $(this);
        });
		this.addFile();
		// 动态生成图片预览模态框
		$('body').append('<div id="imgModal" class="modal hide">'+
							'<div class="modal-mask"></div>'+
							'<div class="modal-content">'+
								'<div class="modal-header">'+
									'<i class="hw-iconfont" data-dismiss="modal">&#xe63d;</i>'+
									'<div class="modal-title">预览</div>'+
								'</div>'+
								'<div class="modal-body">'+
									'<img class="preview-img-box" src="" alt="预览图片">'+
								'</div>'+
								'<div class="modal-footer">'+
									'<button class="hw-btn" data-dismiss="modal">确定</button>'+
								'</div>'+
							'</div>'+
						'</div>');

	};

	/* 点击添加图片 || 添加附件 */
	Upload.prototype.addFile = function() {
		var _this = this;
		// 改变成功回调函数的this指向
		function successCallback(json) {
			_this.submitSuccess.call(_this, json);
		}
		// 选择图片 || 选择附件
		$('body').on('change', _this.origin.fileInput, function() {
			// $(_this.origin.addBtn).hide();
			// 选择附件
			if (_this.attachment) {
				var uploadFile = $(this).val().split('\\'), processNum = 0, doneWid = 0;
				_this.fileName = uploadFile[uploadFile.length - 1];
				var fileList = '<div class="list">'+
									'<div class="detail">'+
										'<div class="file-name">'+ _this.fileName +'</div>'+
										'<span class="process"><span>'+ processNum +'</span>%</span>'+
										'<div class="status">'+
											'<i class="hw-iconfont">&#xe650;</i>'+
											'<i class="hw-iconfont delete-file">&#xe63d;</i>'+
										'</div>'+
									'</div>'+
									'<div class="process-bar">'+
										'<div class="done"></div>'+
									'</div>'+
								'</div>';
				_this.attachmentBox.append(fileList);
				_this.listTimer = setInterval(function() {
					processNum++;
					doneWid = processNum * 5;
					_this.attachmentBox.find('.list').last().find('.process span').text(processNum);
					_this.attachmentBox.find('.list').last().find('.done').css('width', doneWid + 'px');
					if (processNum == 90) {
						clearInterval(_this.listTimer);
					}
				}, 10);
			} else {
				var processNum = 0;
				// 选择图片
				var imgList = '<div class="list">'+
                                '<img src="/static/img/jpg.png" alt="upload-img">'+
                                '<div class="status">'+
                                    '<div class="fail"></div>'+
                                    '<div class="success"></div>'+
                                '</div>'+
                                '<div class="operate">'+
                                    '<i class="hw-iconfont preview-img">&#xe615;</i>'+
                                    '<i class="hw-iconfont delete-img">&#xe65f;</i>'+
                                '</div>'+
                                '<div class="process"><span>'+ processNum +'</span>%</div>'+
                                '<div class="musk"></div>'+
                            '</div>';
                // 单图上传，覆盖前一张图片
                if (_this.maxNum == 1) {
        			$(_this.imgBox).find('.list').first().remove();
                }
                // 多图上传，在前一张图片后添加
                $(_this.btn).before(imgList);
                if ($(_this.imgBox).find('.list').length >= _this.maxNum && _this.maxNum > 1) {
                	$(_this.btn).hide();
                }
                _this.imgTimer = setInterval(function() {
                	processNum++;
                	_this.imgBox.find('.list').last().find('.process span').text(processNum);
                	if (processNum == 90) {
                		clearInterval(_this.imgTimer);
                	}
                }, 10);
			}
			var formBox = $(_this.origin.fileInput).parent();
			formBox.ajaxSubmit({
				url: _this.url, // 默认值为表单的action属性值
				type: _this.origin.type,
				clearForm: true, // 提交成功清除表单数据
				dataType: 'json', // 返回的数据类型
				timeout: 10000, // 超时
				success: successCallback, // 表单成功提交后调用的回调函数
				error: function() {
					if (_this.attachment) {
						clearInterval(_this.listTimer);
						_this.attachmentBox.find('.list').last().addClass('fail').find('.process').text('错误');
					} else {
						clearInterval(_this.imgTimer);
						_this.imgBox.find('.list').last().addClass('fail');
					}
				}
			});
			// IE11
			if (isIEEleven()) {
				$(_this.origin.fileInput).remove();
				$(formBox).append('<input id="'+ _this.origin.fileInput.replace('#', '') +'" type="file" name="file">');
			}
		});
	};


	/* 表单成功提交后调用的回调函数 */
	Upload.prototype.submitSuccess = function(json) {
		var _this = this;
		if (typeof json == 'string') {
			json = JSON.parse(json);
		}
		if (json.code == 0) {
			$.alert(json.msg);
			if (_this.attachment) {
				clearInterval(_this.listTimer);
				_this.attachmentBox.find('.list').last().addClass('fail').find('.process').text('错误');
			} else {
				clearInterval(_this.imgTimer);
				_this.imgBox.find('.list').last().addClass('fail');
			}
			return;
		}
		var temp = '';
		// 附件上传
		if (_this.attachment) {
			var inpName = _this.attachmentBox.data('input-name') ? _this.attachmentBox.data('input-name') : 'attachment[]';
			clearInterval(_this.listTimer);
			_this.attachmentBox.find('.list').last().append('<a href="'+ json.url +'" class="hw-word-btn">下载</a><input type="hidden" name="'+ inpName +'" value="' + json.url + '_gzjf_' + _this.fileName+'" >');
			_this.attachmentBox.find('.list').last().find('.status').show();
			_this.attachmentBox.find('.list').last().find('.done').css('width', '500px');
			_this.attachmentBox.find('.list').last().find('.process').remove();
			_this.attachmentBox.find('.list').last().find('.process-bar').remove();
		} else {
			// 图片上传
	        var inpName = _this.imgBox.data('input-name') ? _this.imgBox.data('input-name') : 'imgs[]';
	        clearInterval(_this.imgTimer);
	        _this.imgBox.find('.list').last().append('<input type="hidden" name="'+ inpName +'" value="' + json.url + '" >');
	        _this.imgBox.find('.list').last().find('img').attr('src', json.url);
	        _this.imgBox.find('.list').last().find('.process').remove();
	        $(_this.origin.fileInput).val('');
	        // 单图上传
	        if (_this.imgBox.find('.list').length == _this.maxNum == 1) {
	        	$(_this.btn).html('<span>更换</span>');
	        	return;
	        }
		}
	};

	/* 附件删除 */
	$('body').on('click', '.hw-attachment-lists .delete-file', function() {
		var _this = this;
		// 二次确认
		$.confirm('确认删除该附件吗？', function() {
			$(_this).parents('.list').eq(0).remove();
		});
	});

	/* 图片删除 */
	$('body').on('click', '.hw-img-lists .delete-img', function() {
		var _this = this;
		// 二次确认
		$.confirm('确认删除该图片吗？', function() {
			$(_this).parents('.hw-img-lists').find('label').show();
			$(_this).parents('.hw-img-lists').find('label').html('+');
			$(_this).parents('.list').eq(0).remove();
		});
	});

	// 图片预览
	$('body').on('click', '.hw-img-lists .preview-img', function () {
		var imgurl = $(this).parent().siblings('img').attr('src');
		// $('#imgModal').modal();
		$('#imgModal').removeClass('hide');
		$('#imgModal').find('.preview-img-box').attr('src', imgurl);
	});

	// 判断是否IE11, IE11的change事件会触发两次
	function isIEEleven(){
		if ("ActiveXObject" in window && window.navigator.userAgent.indexOf("MSIE") == -1) {
			return true;
		} else {
			return false;
		}
	}

	new Upload();


// <!-- 图片上传 -->
// <div class="hw-img-lists" data-input-name="logo">
// 	<?if(isset($enterprise)):?>
//     <div class="list">
//         <img src="" alt="upload-img">
//         <div class="operate">
//             <i class="hw-iconfont preview-img">&#xe615;</i>
//             <i class="hw-iconfont delete-img">&#xe65f;</i>
//         </div>
//         <div class="musk"></div>
//         <input type="hidden" name="logo" value="<?=$enterprise['logo']?>">
//     </div>
//     <?endif;?>
//     <label for="file-input" class="add-file-btn" data-num="1">+</label>
//     <span class="tip">(42px * 42px)</span>
// </div


/*<!-- 附件上传-->
<div class="hw-group">
	<div class="group-title">附件上传</div>
	<div class="group-info">
        <div class="group-item">
        	<div class="hw-input-label">
            	<div class="name"></div>
            	<div class="form-control">
                	<label for="file-input" class="hw-btn hw-default-btn add-attachment-btn">
		    			点击上传
		    		</label>
	    		</div>
    		</div>
        </div>
        <div class="group-item">
            <!-- 附件列表 -->
			<div class="hw-input-label">
				<div class="name"></div>
				<div class="form-control">
					<div class="hw-attachment-lists" data-input-name="attachment[]">
						<?if(isset($attachment)):?>
                        <?foreach($attachment as $key=>$value):?>
                            <div class="list">
                            	<div class="detail">
                            		<div class="file-name">哈哈哈</div>
                            		<div class="status">
                            			<i class="hw-iconfont">&#xe650;</i>
                            			<i class="hw-iconfont delete-file">&#xe63d;</i>
                            		</div>
                            	</div>
                            	<input type="hidden" name="attachment[]" value="">
                            </div>
                        <?endforeach;?>
                        <?endif;?>
					</div>
				</div>
			</div>
        </div>
	</div>
</div>
*/


/*<!-- 文件上传form表单 -->
<form action="" enctype="multipart/form-data" class="upload-form">
	<input id="file-input" type="file" name="file">
</form>
*/